<template>
    <el-submenu :index="menu.index">
        <template slot="title">
            <i v-if="menu.icon" :class="menu.icon"></i>
            <span>{{menu.name}}</span>
        </template>
        <template v-for="(item, idx) in menu.subs">
            <template v-if="item.subs">
                <xx-submenu :menu="item" :key="idx"></xx-submenu>
            </template>
            <template v-else>
                <el-menu-item :index="item.index" :key="idx">{{item.name}}</el-menu-item>
            </template>
        </template>
    </el-submenu>
</template>

<script>
    export default {
        name: "xx-submenu",
        props:{
            menu: {
                index: Number,
                icon: String,
                name: String,
                subs: Array,
            },
        }
    }
</script>

<style scoped>

</style>